{% extends 'base.html' %}
{% load static %}

{% block title %}
激活码生成页面
{% endblock title %}

{% block subtitle %}
<a href="" class="section section-name">授权码生成</a>
{% endblock subtitle %}

{% block container %}
    <div class="ui container file-uploader">
        <div class="ui segment">
            <form class="ui form" enctype="multipart/form-data" method="POST" id="info-form">
                {% csrf_token %}
                <h4 class="ui dividing header">授权码生成</h4>
                <div class="field">
                    <label>{{ form.cert_file.label }}</label>
                    <div class="ui action input">
                        <input type="text" placeholder="选择文件" readonly>
                        {{ form.cert_file }}
                        <!-- <input type="file" style="display: none;" name="cert_file"> -->
                        <div class="ui primary button">上传文件</div>
                    </div>
                </div>
                <div class="ui teal progress" id="file-upload-progress">
                    <div class="bar">
                        <div class="progress"></div>
                    </div>
                    <div class="label">正在上传文件</div>
                </div>
                <div class="field">
                    <label>{{ form.duration.label }}</label>
                    <div class="ui right labeled input">
                        {{ form.duration }}
                        <div class="ui basic label">天</div>
                    </div>
                </div>
                <div class="field">
                    <button class="ui primary button" type="submit" id="cert_submit_btn">生成授权码</button>
                </div>
            </form>
            <div class="ui form">
                <div class="field">
                    <label>授权码</label>
                    <textarea id="code-display" cols="30" rows="15"></textarea>
                </div>
            </div>
        </div>
    </div>
{% endblock container %}

{% block scripts %}
    {{ block.super  }}
    <script>
        var cert_post_url = "{% url 'certifications:generate_certs' %}";

        console.log(cert_post_url);

        $("input:text").click(function() {
            $(this).parent().find("input:file").click();
        });

        $("input:file", ".ui.action.input").on("change", function(e) {
            var name = e.target.files[0].name;
            console.log(name);
            $("input:text", $(e.target).parent()).val(name);
        });

        $("#file-upload-progress").progress({
            percent: 50
        });

        $("#cert_submit_btn").click(function() {
            $.ajax({
                url: cert_post_url,
                context: "#file-upload-progress"
            });
        });
    </script>
{% endblock scripts %}